<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
           data() {
               return {
                   post: {
                    title: 'hello',
                   likes: 333,
                   a: 'A',
                   b: 'B',
                   c: 'C'
                   
                   },
                   count:1
                   }
               },
           
               template:`
               <!--静态传值<test title="I am title" />-->
               动态传值<test v-bind="post" :count="count"
               @handleAdd="clickAdd"/>
               `
            
            })
            app.component('test',{
                data() {
                    return {
                        myCount: this.count
                    }
                },
                props: ['title','likeVal', 'a','b','c','count'],
                emit:{
                    handleAdd(value){
                        console.log('子组件 --》 ' + value);
                        if(value < 30){
                            return true;
                        }else{
                            return false;
                        }
                }
            },
                template:`
                <div @click="handleAdd">{{title}} --- {{myCount}} -- {{a}} -- {{b}} -- {{c}} </div>
                `,
                methods: {
                        handleAdd(){
                            console.log(this.count + ' -- ' + this.myCount);
                            this.$emit('handleAAdd',this.count + 2);
                        }
                    },
            })
            const vm = app.mount("#app");
    </script>
</html>